<template>
    <div>
        <div class="titlebox">
            <p>全部证明</p>
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData()">
            <div>
                <div class="help-list-box" v-if="info.length>0">
                    <div class="help-list-piece" v-for="(item,index) in info" :key="index">
                        <img :src="item.headimgurl" class="piece-user-icon" />
                        <div class="help-list-piece-box">
                            <p class="titles">
                                <b>{{item.nickname}}</b>
                                <i>({{item.relation}})</i>
                            </p>
                            <p class="message">{{item.certifier_content}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
        <footer class="footer">
            <van-button
                type="primary"
                round
                color="linear-gradient(to right, #ff3c3c, #ff5e10)"
                size="large"
                @click="toCashOut()"
            >我也来证明</van-button>
        </footer>
    </div>
</template>

<script>
import { List,button } from "vant";
import { userFundraisingCertifierList } from "@/api/api";
export default {
    components: {
        [List.name]: List,
        [button.name]:button
    },
    data() {
        return {
            loading: false,
            finished: false,
            info: [],
            pageNum: 1
        };
    },
    methods: {
        getData() {
            userFundraisingCertifierList({
                prepare_id: this.$route.query.id,
                pageNum: this.pageNum
            }).then(res => {
                this.pageNum++;
                if (res.code) {
                    for (let i of res.results) {
                        this.info.push(i);
                    }
                }
                if (res.results.length > 0) {
                    this.finished = false;
                } else {
                    this.finished = true;
                }
                this.loading = false;
            });
        },
        toCashOut() {
            this.$router.push({
                path: "/Certifier",
                query: { id: this.$route.query.id}
            });
        }
    }
};
</script>

<style scoped>
.titlebox {
    height: 68px;
    padding: 24px 24px 16px;
    position: relative;
    font-size: 20px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 3.7;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.help-list-box {
    box-sizing: border-box;
    width: 100%;
    padding: 0 24px;
}
.help-list {
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding-bottom: 16px;
}
.help-list-piece {
    box-sizing: border-box;
    padding-left: 56px;
    width: 100%;
    position: relative;
}
.piece-user-icon {
    position: absolute;
    top: 16px;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.help-list-piece-box {
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding: 16px 0;
}
.titles {
    font-size: 0;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 18px;
    display: flex;
}
.titles b {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
    height: 23px;
    font-size: 14px;
    line-height: 18px;
}
.titles span {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 18px;
}
.titles i {
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    color: #ff3c3c;
    font-weight: bold;
    line-height: 18px;
}
.message {
    margin-top: 8px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 18px;
    word-break: break-all;
}
.minute {
    margin: 4px 0 0;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.32);
    line-height: 16px;
}
.van-list{
    padding-bottom: 70px;
}
</style>